<template>
  <view>
    <view class="goodsBox" @click="goPage(`/pages/shop/goodsDetails/goodsDetails?goodId=${info.goodId}`)">
      <image :src="info?.picurl" class="imgBox" mode="aspectFill" />
      <view class="title"> <text class="goodText">旗舰好货</text> {{ info?.title }} </view>
      <view class="priceDesc">
        <view class="priceText"
          >￥ {{ info?.price }} <text class="desc">{{ info?.sellSum }}+ 已购买</text></view
        >
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goPage } from "@/utils/commonFn";
const { info } = defineProps<{
  info: any;
}>();
</script>
<style lang="less" scoped>
.goodsBox {
  width: 100%;
  background-color: #fff;
  margin-bottom: 16rpx;
  .imgBox {
    width: 100%;
    height: 366rpx;
  }
  .title {
    padding: 0rpx 18rpx;
    padding-top: 10rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;
    line-height: 40rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 设置为想要的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
    .goodText {
      background: #ea3b3b;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      color: #fff;
      text-align: center;
      padding: 2rpx 4rpx;
      margin-right: 4rpx;
    }
  }
  .priceDesc {
    padding: 4rpx 22rpx 20rpx;
    display: flex;
    align-items: center;
    .priceText {
      font-weight: 500;
      font-size: 36rpx;
      color: #ea3b3b;
    }
    .desc {
      font-size: 24rpx;
      color: #8a8a8d;
    }
  }
}
</style>
